<template> 
  <div class="card"> 
    <el-link class="back" @click="handleBack"><el-icon><Back /></el-icon>返回 </el-link>
    <div class="title">购买记录</div>
    <motion.div
      :initial="{ opacity: 0, y: 20 }"
      :animate="{ opacity: 1, y: 0 }"
      :transition="{ duration: 1 }"
    >
      <el-table :data="tableData" style="width: 100%" :border="false" :max-height="800">
        <el-table-column prop="info" label="素材信息" width="500">
          <template #default="{ row }">
            <div class="info-box">
              <div class="img">
                <img src="@/assets/images/img.png" alt="">
              </div>
              <div class="info">
                <div class="name">{{ row.name }}</div>
                <div class="tag">
                  <span>心肺</span>
                  <span>脑科</span>
                  <span>其他</span>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="orderNo" label="订单编号" minWidth="200" />
        <el-table-column prop="time" label="购买时间"  minWidth="250"/>
        <el-table-column prop="status" label="下载状态"  minWidth="150"/>
        <el-table-column prop="user" label="下载人" minWidth="150" />
        <el-table-column prop="price" label="金额" width="150">
          <template #default="{ row }"> 
            <img width="20" class="middle" src="@/assets/images/icon-logo.png" alt="">
            <span class="middle" style="font-weight: bold;margin-left: 5px;">{{ row.price }}</span>
          </template>
        </el-table-column>
        <template #empty>
          <div class="empty">
            <img src="@/assets/images/empty.png" alt="">
            <p class="name" style="font-size: 18px;">暂无数据</p>
          </div>
        </template>
      </el-table>
    </motion.div>
    <div class="pagination">
      <el-pagination
        v-model:current-page="page"
        v-model:page-size="size"
        :page-sizes="[10, 20, 50, 100]"
        layout="sizes, prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script setup>
import { motion } from "motion-v"
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const page = ref(1)
const size = ref(10)
const total = ref(100)
const router = useRouter()
const handleBack = () => {
  router.back()
}
const tableData = ref([])
const handleSizeChange = (val) => {
  size.value = val
}
const handleCurrentChange = (val) => {
  page.valie = val
}
</script>
<style lang="scss" scoped>
.back {
  font-size: 20px;
  margin-bottom: 20px;
}
.title{
  margin: 0 20px 20px;
  font-size: 24px;
  color: #333333;
  font-weight: 500;
}
.info-box{
  display: flex;
  align-items: center;
  .info{
    margin-left: 20px;
    width: calc(100% - 140px);
    .name{
      font-size: 18px;
      color: #333333;
      font-weight: bold;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .img{
    width: 130px;
    height: 80px;
    border-radius: 10px;
    overflow: hidden;
    img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .tag{
    margin-top: 5px;
    span {
      display: inline-block;
      padding: 0px 8px;
      margin-right: 8px;
      font-size: 12px;
      color: #fff;
      border-radius: 4px;
      &:nth-child(1){
        background: #1E4FF0;
      }
      &:nth-child(2){
        background: #00A4B0;
      }
      &:nth-child(3){
        background: #E15181;
      }
    }
  }
}
.pagination{
  margin: 20px 0;
  display: flex;
  justify-content: center;
}
</style>